<template>
  <view class="list-box">
    <view v-for="it in list" :key="it" class="item">{{ it }}</view>
  </view>
</template>

<script lang="ts">
import { Component, Prop, Vue, Watch } from 'vue-property-decorator'

@Component({})
export default class DataList extends Vue {
  @Prop({
    default() {
      return []
    }
  })
  list!: Array<string>

  @Watch('list', { immediate: true })
  listChange() {
    console.log('列表数据更改：', this.list)
  }
}
</script>

<style lang="scss" scoped>
.item {
  padding: 30rpx 10rpx;
  margin: 10rpx;
  color: #fff;
  background: #333;
  border-radius: 4px;
}
</style>
